<template>
	<div class="">
		<el-row :span="24">
			<!-- pc -->
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="bghhhhh">
						<div class="rightCon">
							<headerPcTow :title="$t('l_xiaoxi')" :isShow="true"></headerPcTow>

							<div class="con1One">
								<div class="con1Tow">
									<div class="headerTow">
										<div :class="'hitemTow ' + (item.id == navIndex?'active':'')"
											v-for="(item,index) in navList" :key="index" @click="changeNav(item)">
											<div class="nav_text">
												{{ item.name }}
											</div>
											<!-- <div class="nav_tab_boxTow">
												<p class="tab_text">16</p>
												<p></p>
											</div> -->
										</div>
									</div>
									<!-- <div class="right_btnTow">
										<span>全部已读</span>
									</div> -->
								</div>

								<div class="notice_boxTow">
									<div class="notice_item_box">
										<div class="notice_item" v-for="(item,index) in noticeData" :key="index"
											@click="gonoticedetail(item.id)">
											<div class="notice_item_left">
												<div class="left_icon">
													<i class="icons">
														<svg viewBox="0 0 20.413 12.425" width="1em" height="1em"
															fill="currentColor" aria-hidden="true" focusable="false">
															<use xlink:href="/icons/icon.svg#music_audio--sprite">

															</use>
														</svg>
													</i>
												</div>
												<div class="left_text_box">
													<div class="top_text">
														{{item.title}}
													</div>
													<div class="time_text">
														{{timestampToTime(item.create_time)}}
													</div>
												</div>
											</div>
											<!-- <div class="notice_item_right">
												<span v-if="item.status == 1">未读</span>
												<span v-else class="finish_text">已读</span>
												<i class="icons">
													<svg viewBox="0 0 20.413 12.425" width="1em" height="1em"
														fill="currentColor" aria-hidden="true" focusable="false">
														<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite">
										
														</use>
													</svg>
												</i>
											</div> -->
										</div>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<!-- h5 -->
			<el-col :sm="0" :xs="24">
				<div class="notice pageContainer">
					<navHeader :title="$t('l_xiaoxi')"></navHeader>

					<div class="container scroll-container">
						<div class="nav_top_box">
							<div :class="'nav_item ' + (item.id == navIndex?'nav_active':'')"
								v-for="(item,index) in navList" :key="index" @click="changeNav(item)">
								<div class="nav_text">
									{{ item.name }}
								</div>
								<!-- <div class="nav_tab_box">
									<p class="tab_text">16</p>
									<p></p>
								</div> -->
							</div>
						</div>

						<div class="notice_box">
							<div class="notice_item_box">
								<div class="notice_item" v-for="(item,index) in noticeData" :key="index"
									@click="gonoticedetail(item.id)">
									<div class="notice_item_left">
										<div class="left_icon">
											<i class="icons">
												<svg viewBox="0 0 20.413 12.425" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#music_audio--sprite">

													</use>
												</svg>
											</i>
										</div>
										<div class="left_text_box">
											<div class="top_text">
												{{item.title}}
											</div>
											<div class="time_text">
												{{timestampToTime(item.create_time)}}
											</div>
										</div>
									</div>
									<!-- <div class="notice_item_right">
										<span v-if="item.status == 1">未读</span>
										<span v-else class="finish_text">已读</span>
										<i class="icons">
											<svg viewBox="0 0 20.413 12.425" width="1em" height="1em"
												fill="currentColor" aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite">

												</use>
											</svg>
										</i>
									</div> -->
								</div>

							</div>

							<!-- <div class="bottom_white_box">
								<div class="right_btn">
									<span>全部已读</span>
								</div>
							</div> -->
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'

	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer,
			headerPcTow
		},
		data() {
			return {
				navIndex: 0,
				navList: [{
						id: 0,
						name: this.$t('l_gonggao')
					},
					// {
					// 	id: 1,
					// 	name: '通知'
					// },
					// {
					// 	id: 2,
					// 	name: '跑马灯'
					// }
				],
				noticeData: [],
				navIndex1: 0,
				navs: [{
						id: 0,
						name: this.$t('l_remen'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_game_menu_active_8',
					},

					{
						id: -2,
						name: this.$t('l_zuijin'),
						key: 'icon_game_menu_active_100',
					},
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				],

				noticeData: [],
			}
		},
		created() {
			this.getNotice()
		},
		methods: {
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav1(item) {
				this.$router.push('/')
			},
			gonoticedetail(e) {
				this.$router.push({
					path: './noticedetail',
					query: {
						id: e
					}
				})
			},
			getNotice() {
				this.$api.ArticleGetList({
					category_id: 4
				}, (res) => {
					if (res.code == 0) {
						this.noticeData = res.data.list
						console.log(this.noticeData)
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			timestampToTime(timestamp) {
				timestamp = timestamp ? timestamp : null;
				let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + h + m + s;
			}
		}
	}
</script>

<style lang="less" scoped>
	/* pc */
	.bghhhhh {
		flex: 1;
		height: 300px;
	}

	.rightCon {
		width: 75%;
		margin: 0 auto;
	}

	.fanshuiBox {
		width: 100%;
		margin-top: 20px;
	}

	.con1One {
		background: var(--theme-main-bg-color);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		padding: 20px 0px 10px;
		box-sizing: border-box;
		border-radius: 5px;
		margin-top: 20px;
	}

	.con1Tow {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 10px;
		border-bottom: 1px solid var(--theme-color-line);
	}

	.headerTow {
		height: 36px;
		display: flex;
		padding: 0px 10px;
		justify-content: flex-start;
		align-items: center;
	}

	.hitemTow {
		height: 30px;
		border-bottom: 2px solid transparent;
		line-height: 30px;
		font-size: 14px;
		color: #fff;
		margin-left: 30px;
		cursor: pointer;
		position: relative;
	}

	.hitemTow:first-child {
		margin-left: 0;
	}

	.hitemTow.active {
		color: var(--theme-primary-color);
		border-bottom: 2px solid var(--theme-primary-color);
	}

	.nav_tab_boxTow {
		height: 15px;
		position: absolute;
		top: -10px;
		right: -20px;

		.tab_text {
			font-size: 12px;
			height: 15px;
			line-height: 15px;
			padding: 0 3px;
			background-color: var(--theme-secondary-color-error);
			border-radius: 10px 10px 10px 0;
			color: #fff;
			width: 100%;
			font-weight: 300;
		}

		p:nth-child(2) {
			border-bottom: 3px solid transparent;
			border-left: 3px solid var(--theme-secondary-color-error);
			border-right: 3px solid transparent;
			height: 0;
			width: 0;
		}
	}

	.right_btnTow {
		span {
			background-color: var(--theme-primary-color);
			border-radius: 5px;
			color: var(--theme-primary-font-color);
			font-size: 14px;
			width: 70px;
			height: 28px;
			line-height: 28px;
			display: block;
			text-align: center;
			font-weight: 300;
			cursor: pointer;
			margin-bottom: 10px;
		}
	}

	.notice_boxTow {
		padding: 20px;

		.notice_item_box {
			padding: 10px;
			background-color: var(--theme-bg-color);
			border-radius: 5px;
			margin-top: 10px;
			padding: 20px;

			.notice_item {
				// min-height:100px;
				margin-bottom: 20px;
				background-color: var(--theme-main-bg-color);
				border-radius: 5px;
				box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .06);
				padding: 10px;
				display: flex;
				flex-shrink: 0;
				justify-content: space-between;
				align-items: center;

				&_left {
					display: flex;
					align-items: center;

					.left_icon {
						position: relative;
						font-size: 12px;

						.icons {
							color: var(--theme-active-bg-color);
							font-size: 30px;
							margin-right: 10px;
						}

					}

					.left_icon::after {
						background-color: var(--theme-secondary-color-error);
						border-radius: 100%;
						content: "";
						height: 8px;
						position: absolute;
						right: 13px;
						top: -3px;
						width: 8px;
					}

					.left_text_box {
						flex-grow: 1;
						display: flex;
						flex-direction: column;

						.top_text {
							font-size: 15px;
							// max-width: 3.8rem;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							color: var(--theme-text-color-darken);
							display: inline-block;
							margin-bottom: 10px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.time_text {
							font-size: 13px;
							color: var(--theme-text-color-lighten);
						}
					}

				}

				&_right {
					font-size: 14px;
					color: var(--theme-text-color-darken);
					display: flex;
					align-items: center;
					font-weight: 300;
					cursor: pointer;

					.finish_text {
						color: var(--theme-text-color-lighten);
					}

					.icons {
						color: var(--theme-color-line);
						transform: rotate(180deg);
						font-size: 20px;
						margin-left: 5px;
						margin-bottom: 7px;
					}
				}
			}

			.notice_item:last-child {
				margin-bottom: 0px;
			}
		}
	}

	.notice {
		width: 100vw;
		min-height: 100vh;
		background-color: var(--theme-bg-color);

		.nav_top_box {
			padding: 0.1rem 0.2rem 0;
			border-bottom: thin solid var(--theme-color-line);
			display: flex;

			.nav_item {
				font-size: .22rem;
				color: var(--theme-text-color-darken);
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				text-align: center;
				height: 0.72rem;
				margin-right: 0.6rem;

				.nav_text {
					font-weight: 300;
				}

				.nav_tab_box {
					height: 0.32rem;
					position: absolute;
					top: -0.02rem;
					right: -0.26rem;

					.tab_text {
						font-size: .18rem;
						height: 0.26rem;
						line-height: .26rem;
						padding: 0 0.04rem;
						background-color: var(--theme-secondary-color-error);
						border-radius: 0.125rem 0.125rem 0.125rem 0;
						color: #fff;
						width: 100%;
						font-weight: 300;
					}

					p:nth-child(2) {
						border-bottom: 0.07rem solid transparent;
						border-left: 0.07rem solid var(--theme-secondary-color-error);
						border-right: 0.07rem solid transparent;
						height: 0;
						width: 0;
					}
				}
			}

			.nav_active {
				border-bottom: 0.04rem solid var(--theme-primary-color);
				color: var(--theme-primary-color);
			}
		}

		.notice_box {
			.notice_item_box {
				padding: 0.2rem;

				.notice_item {
					min-height: 1.2rem;
					margin-bottom: 0.2rem;
					background-color: var(--theme-main-bg-color);
					border-radius: 0.1rem;
					box-shadow: 0 0.03rem 0.09rem 0 rgba(0, 0, 0, .06);
					padding: 0.2rem;
					display: flex;
					flex-shrink: 0;
					justify-content: space-between;
					align-items: center;

					&_left {
						display: flex;
						align-items: center;

						.left_icon {
							position: relative;

							.icons {
								color: var(--theme-active-bg-color);
								font-size: .5rem;
								margin-right: 0.3rem;
							}

						}

						// .left_icon::after {
						// 	background-color: var(--theme-secondary-color-error);
						// 	border-radius: 100%;
						// 	content: "";
						// 	height: 0.12rem;
						// 	position: absolute;
						// 	right: 0.32rem;
						// 	top: 0.44rem;
						// 	width: 0.12rem;
						// }


						.left_text_box {
							flex-grow: 1;
							display: flex;
							flex-direction: column;

							.top_text {
								font-size: .24rem;
								max-width: 3.8rem;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 3;
								color: var(--theme-text-color-darken);
								display: inline-block;
								margin-bottom: 0.14rem;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.time_text {
								font-size: .2rem;
								color: var(--theme-text-color-lighten);
							}
						}

					}

					&_right {
						font-size: .24rem;
						color: var(--theme-text-color-darken);
						display: flex;
						align-items: center;
						font-weight: 300;

						.finish_text {
							color: var(--theme-text-color-lighten);
						}

						.icons {
							color: var(--theme-color-line);
							transform: rotate(180deg);
							font-size: .36rem;
							margin-left: 0.1rem;
							margin-bottom: 0.08rem;
						}
					}
				}
			}

			.bottom_white_box {
				position: fixed;
				bottom: 0;
				background-color: #fff;
				width: 100%;
				height: 1rem;
				display: flex;
				justify-content: flex-end;

				.right_btn {
					padding: 0.1rem 0.2rem;

					span {
						background-color: var(--theme-primary-color);
						border-radius: 0.1rem;
						color: var(--theme-primary-font-color);
						font-size: .2rem;
						width: 1.2rem;
						height: 0.5rem;
						line-height: .5rem;
						display: block;
						text-align: center;
						font-weight: 300;
					}
				}
			}
		}
	}
</style>